import { useState } from "react";

const list = [
  {
    id: 0,
    name: "diz",
    comment: "diz is beatiful",
    count: 100,
    date: 125632546,
    uid: 1234
  },
  {
    id: 1,
    name: "dieeez",
    comment: "difdsafaz is sdfsafsdasbeatiful",
    count: 10120,
    date: 125632546,
    uid: 1234
  },
  {
    id: 2,
    name: "digsfsdz",
    comment: "difsdafasfsaz is dfsadsfsa",
    count: 12500,
    date: 125632546,
    uid: 1234
  },
  {
    id: 3,
    name: "divsdacsdvvz",
    comment: "difasd vdssafz is bdfdaseatiful",
    count: 5100,
    date: 125632546,
    uid: 12345
  },
  {
    id: 4,
    name: "digsfsdz",
    comment: "difsdafasfsaz is dfsadsfsa",
    count: 12500,
    date: 125632546,
    uid: 12345
  },
  {
    id: 5,
    name: "divsdacsdvvz",
    comment: "difasd vdssafz is bdfdaseatiful",
    count: 5100,
    date: 125632546,
    uid: 1234
  }
]


const user = {
  uid: 1234,
  name: "divsdacsdvvz"
}



// App组件
function App() {


  const [commentList, setCommentList] = useState(list)
  const handleDel = (delId) => {
    console.log(delId);
    setCommentList(commentList.filter(item => item.id !== delId))
  }


  return (
    <div className="App">
      <ul>
        {
          commentList.map(item => (
            <div key={item.id}>
              {item.name}
              <br />
              {item.comment}&nbsp;&nbsp;&nbsp;&nbsp;
              点赞数：{item.count}&nbsp;&nbsp;&nbsp;&nbsp;
              发布时间：{item.date}&nbsp;&nbsp;&nbsp;&nbsp;
              {user.uid === item.uid && <button onClick={() => handleDel(item.id)}>删除</button>}
              <hr /><br />
            </div>

          ))
        }
      </ul>

    </div>
  );
}

export default App;
